<div
  class="po-stepper-circle"
  [class.po-stepper-circle-center]="alignCenter"
  [ngClass]="{ 'po-stepper-circle-border': !isActive && !isError, 'po-stepper-circle-done': isDone }"
  [style.height.px]="size"
  [style.width.px]="size"
>
  @if (isActive || isError) {
    <div class="po-stepper-circle-active">
      <po-icon
        class="po-stepper-circle-content"
        [class.po-icon]="true"
        [p-icon]="iconActive ? iconActive : 'ICON_EDIT'"
        [class.po-stepper-circle-content-lg]="isLargeStep"
        [class.po-stepper-circle-content-md]="isMediumStep"
      ></po-icon>
    </div>
  } @else {
    @if (!isActive) {
      <po-icon
        class="po-stepper-circle-content"
        [class.po-icon]="icons || isDone"
        [p-icon]="isDone ? iconDone || 'ICON_OK' : iconDefault ? iconDefault : icons ? 'ICON_INFO' : ''"
        [class.po-stepper-circle-content-lg]="isLargeStep"
        [class.po-stepper-circle-content-md]="isMediumStep"
      >
        {{ !icons && !isDone && !iconDefault ? content : '' }}
      </po-icon>
    }
  }
</div>
